<template>
  <div ref="rippleContainerRef" class="ripple-box">
    <span style="--i: 0"></span>
    <span style="--i: 1"></span>
    <span style="--i: 2"></span>
    <span style="--i: 3"></span>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps({
  color: {
    type: String,
    default: '#0087dc'
  },
  width: {
    type: Number,
    default: 2
  }
})

const rippleContainerRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
  rippleContainerRef.value?.style.setProperty('--border-color', props.color)
  rippleContainerRef.value?.style.setProperty('--border-width', props.width + 'px')
})
</script>

<style scoped lang="scss">
.ripple-box {
  width: calc(100%);
  height: calc(100%);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  --border-color: #949494;
  --border-width: 2px;

  span {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    box-sizing: border-box;
    border: var(--border-width) solid var(--border-color);
    animation: animate 4s linear infinite;
    animation-delay: calc(1s * var(--i));
  }

  @keyframes animate {
    0% {
      transform: scale(1);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
}
</style>
